<template>
  <div class="home">
    <common-header></common-header>
    <div class="home-body">
      <Carousel v-model="value1" loop auto style="margin:20px 0;" v-if="banner.length !== 0" autoplay>
        <CarouselItem v-for="item in banner" :key="item.id">
          <img
            class="iimg"
            :src="'http://localhost:3000' + item.img"
            alt=""
            style="width:100%;"
            @click="
              () => {
                this.$router.push('/detail?id=' + item.bid);
              }
            "
          />
        </CarouselItem>
      </Carousel>
      <Row style="margin-top:20px;">
        <Col span="5" class="classify">
          <goods-title title="零食分类"></goods-title>
          <bk-tag :text="n.name" v-for="n in types" :key="n.id"></bk-tag>
        </Col>
        <Col span="18" offset="1">
          <div class="classify">
            <goods-title title="新品热销"> </goods-title>
            <Row type="flex">
              <goods-pic :goods="goods" v-for="goods in goodss" :key="goods.id"></goods-pic>
            </Row>
          </div>
        </Col>
      </Row>
    </div>
    <bk-footer></bk-footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      goodss: [],
      types: [],
      hots: [],
      value1: 0,
      banner: []
    };
  },
  mounted() {
    this.$api.type.getType().then(data => {
      this.types = data;
    });
    this.$api.goods.getNews().then(data => {
      this.goodss = data;
    });
    this.$api.goods.getHot().then(data => {
      this.hots = data;
    });
    this.$api.banner.get().then(data => {
      this.banner = data;
    });
  }
};
</script>
<style lang="scss" scoped>
.home {
  .home-body {
    min-height: 700px;
    padding: 0 10%;
    margin: 0 auto;
    overflow: hidden;
  }
  .home-img {
    height: 98px;
    width: 100%;
    margin: 30px 0;
  }
  .goods-list {
    margin-top: 20px;
  }
  .classify {
    background: #fff;
    box-shadow: 0 0 10px #fff;
    min-height: 280px;
    padding: 10px 5px;
    color: #933;
  }
  .iimg{
    height: 430px !important;
  }
}
</style>
